<template>
    <el-card style="height: 75px">
        <el-form :inline="true" class="top-form">
            <el-form-item label="角色名称">
                <el-input placeholder="请输入角色名称" v-model.trim="searchinput"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="clickSearch">搜索</el-button>
                <el-button @click="clickReset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

// 搜索框内容
let searchinput = ref<string>()
// 组件通信，传递“搜索”和“重置事件”
let $emit = defineEmits(['searchEvent','resetEvent'])
// 点击搜索
const clickSearch = ()=>{
    if (searchinput.value) $emit('searchEvent',searchinput.value);
    else ElMessage.warning('搜索值不能为空')
}
// 点击重置
const clickReset = ()=>{
    searchinput.value = ''
    $emit('resetEvent')
}
</script>

<style scoped>
.top-form {
    display: flex;
    justify-content: space-between;
}
</style>